<template>
  <div>
    <div class="demo-input-size">
      <el-input
        placeholder="请输入文件名"
        style="width: 250px; padding-right: 5px"
        v-model="fileName"
      ></el-input>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="warning" @click="reload">重置</el-button>
    </div>

    <div style="padding-top: 10px">
      <el-upload
        :action="baseApi + '/file/upload'"
        :show-file-list="false"
        :on-success="handleFileUploadSuccess"
        style="display: inline-block"
      >
        <el-button type="primary" style="font-size: 18px">上传</el-button>
      </el-upload>
      <el-button
        type="danger"
        @click="delBatch"
        style="margin-left: 10px; font-size: 18px"
      >
        批量删除
      </el-button>
    </div>

    <el-table
      :data="tableData"
      background-color="black"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="name" label="文件名" width="350"></el-table-column>
      <el-table-column
        prop="type"
        label="文件类型"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="size"
        label="文件大小"
        width="180"
      ></el-table-column>
      <el-table-column label="操作" width="240" fixed="right">
        <template #default="scope">
          <a :href="baseApi + scope.row.url">
            <el-button type="success" style="font-size: 18px">下载</el-button>
          </a>
          <el-button
            type="danger"
            style="margin-left: 10px; font-size: 18px"
            @click="handleDelete(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block" style="flex: 0 0 auto">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[3, 5, 8, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentPage"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useStore } from "vuex";
import { ElMessageBox } from "element-plus";
const store = useStore();

// Reactive data
const baseApi = ref<string>(store.state.baseApi);
const tableData = ref<any[]>([]);
const total = ref<number>(0);
const pageSize = ref<number>(5);
const currentPage = ref<number>(1);
const fileName = ref<string>("");
const multipleSelection = ref<any[]>([]);

// Methods
const handleSizeChange = (size: number) => {
  pageSize.value = size;
  load();
};

const handleCurrentPage = (page: number) => {
  currentPage.value = page;
  load();
};

const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val;
};

const handleFileUploadSuccess = () => {
  store.state.message.success("上传成功");
  load();
};

const load = () => {
  store.state.request
    .get("/file/page", {
      params: {
        pageNum: currentPage.value,
        pageSize: pageSize.value,
        fileName: fileName.value,
      },
    })
    .then((res: any) => {
      if (res.code === "200") {
        tableData.value = res.data.records.map((item: any) => {
          let size = item.size;
          if (size < 1024) {
            item.size = size + " Kb";
          } else if (size > 1024 && size < 1024 * 1024) {
            item.size = (size / 1024).toFixed(2) + " Mb";
          } else {
            item.size = (size / 1024 / 1024).toFixed(2) + " Gb";
          }
          return item;
        });
        total.value = res.data.total;
      }
    });
};

const search = () => {
  currentPage.value = 1;
  load();
};

const reload = () => {
  fileName.value = "";
  load();
};

const handleDelete = (id: any) => {
  ElMessageBox.confirm("确认删除该文件吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    store.state.request.delete("/file/" + id).then((res: any) => {
      if (res.code === "200") {
        store.state.message.success("删除成功");
        load();
      } else {
        store.state.message.error(res.msg);
      }
    });
  });
};

const delBatch = () => {
  const ids = multipleSelection.value.map((v) => v.id);
  ElMessageBox.confirm("确认删除这些文件吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    store.state.request.post("/file/del/batch", ids).then((res: any) => {
      if (res.code === "200") {
        store.state.message.success("批量删除成功");
        load();
      } else {
        store.state.message.error(res.msg);
      }
    });
  });
};

// Lifecycle
onMounted(() => {
  load();
});
</script>

<style scoped></style>
